<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">


function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
    
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '600px';
  }
}

  function initialize() {
  
    detectBrowser();

    var myLatlng = new google.maps.LatLng(<?php echo $result[0][pro_lat];?>, <?php echo $result[0][pro_lon];?>);
    var myOptions = {
      zoom: 9,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var poverty = [
                        ['<?php echo $result[0]["pro_name"];?>', 
                          '<?php echo $result[0]["pro_name"]; ?>', 
                          '<?php echo $result[0]["pro_lat"]; ?>', 
                          '<?php echo $result[0]["pro_lon"]; ?>', 
                          1,
                          "icons/marker/blue-dot.png"
                        ],
                 ];

      setMarkers(map, poverty);
    }

function makeMarker(imageName){
  //alert(imageName);
  var iconImage = new google.maps.MarkerImage(imageName,
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
    return iconImage;
}

function makeShadow(){
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
    return iconShadow;
}
  
  function setMarkers(map, locations) {

    for (var i = 0; i < locations.length; i++) {
      var data = locations[i];
      var myLatLng = new google.maps.LatLng(data[2], data[3]);
     var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          //shadow: makeShadow(),
          //icon: makeMarker(data[5]),
          //shape: shape,
          icon: "icons/marker/blue-dot.png",
          title: data[0],
          zIndex: data[4]
      });

                   
    var contentString = data[1];
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
/*    
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    */
    
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker));
    
    }
    
    function infoCallback(infowindow, marker) {
      return function() {
      infowindow.open(map, marker);
  };
}
  }


</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>


<?php

 /**
  * map
  */
/*
  var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
  var myOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  }
 var map = new google.maps.Map(document.getElementById('mapa'), myOptions);

 var infoWindow = new google.maps.InfoWindow();
 var markerBounds = new google.maps.LatLngBounds();
 var markerArray = [];

 function makeMarker(options){
   var pushPin = new google.maps.Marker({map:map});
   pushPin.setOptions(options);
   google.maps.event.addListener(pushPin, 'click', function(){
     infoWindow.setOptions(options);
     infoWindow.open(map, pushPin);
   });
   markerArray.push(pushPin);
   return pushPin;
 }

 google.maps.event.addListener(map, 'click', function(){
   infoWindow.close();
 });

 function openMarker(i){
   google.maps.event.trigger(markerArray[i],'click');
 };
*/

?>